const path = require('path');
// 引入html打包插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
// 引入提取css文件的插件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
//引入 优先css的插件
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');

const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const glob = require("glob");

// 书写代码完成，完成webpack入口的js文件的自动扫描功能
let entryObj = {}
// 书写扫描的规则
let data = glob.sync("./src/pages/**/*.js")
// 遍历数组
data.forEach(function (v) {
    let fileNameArr = v.match(/\/(\w+).js/i)
    entryObj[fileNameArr[1]] = v
})

let htmlFiles = glob.sync("./src/pages/**/*.html")
// 使用map遍历数组，处理数据
let htmlArr = htmlFiles.map(function (v) {
    let fileArr = v.match(/\/(\w+).html/i)
    return new HtmlWebpackPlugin({
        template: v,
        filename: fileArr[0].slice(1),
        chunks: [fileArr[1]]
    })
})
module.exports = {

    // 入口
    entry: entryObj,
    // ad: "./src/pages/ad/ad.js",
    // rego: "./src/pages/rego/rego.js",
    // record: "./src/pages/record/record.js",
    // index: "./src/pages/index/index.js",
    // mine: "./src/pages/mine/mine.js",
    // personal: "./src/pages/personal/personal.js",
    // emblem: "./src/pages/emblem/emblem.js",
    // course: "./src/pages/sport/course/course.js",
    // course_training: "./src/pages/sport/course_training/course_training.js",
    // run: "./src/pages/sport/run/run.js",


    // 出口
    output: {
        // 公共的文件输出路径
        publicPath: "./",
        filename: "js/[name].js",
    },
    // 加载器
    module: {
        // 加载器的规则
        rules: [
            // css加载器
            {
                test: /\.css$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader"]
            },
            // less加载器
            {
                test: /\.less$/, use: [{
                    loader: MiniCssExtractPlugin.loader,
                    options: {
                        publicPath: "../"
                    }
                }, "css-loader", "less-loader"]
            },
            // css中引用图片的加载器
            {
                test: /\.(jpg|jpeg|webp|gif|svg|png|mp4)$/,
                use: [{
                    loader: "url-loader",
                    options: {
                        limit: 10 * 1024,
                        name: "[hash:16].[ext]",
                        outputPath: "imgs",
                        esModule: false, //禁用es6的模块化
                    }
                }]
            },
            // html页面中的图片加载器
            { test: /\.html$/, use: ["html-loader"] },
            // 加载iconfont字体图标
            {
                test: /\.(ttf|woff|woff2|eot|svg)$/i, use: [{
                    loader: 'file-loader',
                    options: {
                        name: '[hash:16].[ext]', //设置字体图标文件的文件名
                        outputPath: 'fonts', //设置字体图标文件的打包文件夹
                    }
                }]
            }

        ]
    },

    // 插件
    plugins: [
        //提取css文件的插件
        new MiniCssExtractPlugin({
            filename: 'css/[name].css',
        }),
        // 优化css的插件
        new OptimizeCssAssetsWebpackPlugin(),
    ].concat(htmlArr),
    // 模式
    mode: process.env.NODE_ENV,

    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        compress: true,
        port: 8082,
        open: true,
        publicPath: '/',
        openPage: 'selecte.html',
    },
    target: 'web',
}